<template>
    <el-dialog :title="title" :visible.sync="visible" :before-close="closeDialog">
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            :label-width="formLabelWidth"
            size="small"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单类型" prop="isMenu">
                        <el-radio-group v-model="form.isMenu">
                            <el-radio-button :label="1">菜单</el-radio-button>
                            <el-radio-button :label="2">按钮</el-radio-button>
                            <el-radio-button :label="3">页面</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="permissionName">
                        <el-input v-model="form.permissionName" placeholder="请输入菜单名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.isMenu != 2">
                <el-col :span="24">
                    <el-form-item label="组件路径" prop="path">
                        <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="权限标识" prop="permissionCode">
                <el-input v-model="form.permissionCode" placeholder="请输入权限标识"></el-input>
            </el-form-item>
            <el-form-item label="菜单排序">
                <el-input-number
                    v-model="form.sort"
                    style="width:100%;"
                    controls-position="right"
                    :min="1"
                    :max="999"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="上级类目">
                <el-cascader
                    placeholder="请选择上级类目(默认为顶级)"
                    style="width:100%"
                    v-model="menu"
                    clearable
                    :options="tree"
                    :props="{ 'value': 'permissionId', 'label': 'permissionName', checkStrictly: true, disabled: 'disabled' }"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="菜单图标">
                <el-autocomplete
                    style="width: 100%;"
                    popper-class="my-autocomplete"
                    v-model="form.icon"
                    :fetch-suggestions="querySearch"
                    placeholder="请选择或输入图标名称"
                    @select="iconHandleSelect"
                    clearable
                >
                    <i class="{name:'el-icon-picture-outline-round el-input__icon" slot="suffix"></i>
                    <template slot-scope="{ item }">
                        <i :class="item.name" class="icon"></i>
                        <div class="name">{{ item.name }}</div>
                    </template>
                </el-autocomplete>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="comitDialog">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { addMenu, updateMenu } from "@/api/modules/SystemManagement/menuManagement";
import { getAllMenu, getMenuById,getFaththIdListByid } from "@/api/modules/SystemManagement/menuManagement";
export default {
    props: {
        title: String,
        visible: {
            type: Boolean,
            default: false
        },
        permissionId: {
            type: Number,
            default: null
        }
    },
    watch: {
        visible(newdata) {
            if (newdata) {
                this.getAllMenu()
                if (this.title == "编辑菜单") {
                    this.getMenuById(this.permissionId)
                    this.getFaththIdListByid(this.permissionId)
                }
            } else {
                this.resetForm("ruleForm");
                this.menu = []
                this.form = {
                    "permissionId": null,
                    "path": "",
                    "fatherId": 0,
                    "isMenu": 1,
                    "permissionCode": "",
                    "permissionName": "",
                    "sort": 1,
                    "icon": ""
                }
            }
        },
    },
    data() {
        return {
            form: {
                "permissionId": null,
                "path": "",
                "fatherId": 0,
                "isMenu": 1,
                "permissionCode": "",
                "permissionName": "",
                "sort": 1,
                "icon": ""
            },
            menu: [],
            tree: [],
            formLabelWidth: '80px',
            rules: {
                isMenu: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' }
                ],
                permissionName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                path: [
                    { required: true, message: '请输入组件路径', trigger: 'blur' },
                ],
                permissionCode: [
                    { required: true, message: '请输入权限标识', trigger: 'blur' },
                ],
                role: [
                    { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
                ]
            },
            iconList: [
                { name: 'el-icon-platform-eleme' },
                { name: 'el-icon-eleme' },
                { name: 'el-icon-delete-solid' },
                { name: 'el-icon-delete' },
                { name: 'el-icon-s-tools' },
                { name: 'el-icon-setting' },
                { name: 'el-icon-user-solid' },
                { name: 'el-icon-user' },
                { name: 'el-icon-phone' },
                { name: 'el-icon-phone-outline' },
                { name: 'el-icon-more' },
                { name: 'el-icon-more-outline' },
                { name: 'el-icon-star-on' },
                { name: 'el-icon-star-off' },
                { name: 'el-icon-s-goods' },
                { name: 'el-icon-goods' },
                { name: 'el-icon-warning' },
                { name: 'el-icon-warning-outline' },
                { name: 'el-icon-question' },
                { name: 'el-icon-info' },
                { name: 'el-icon-remove' },
                { name: 'el-icon-circle-plus' },
                { name: 'el-icon-success' },
                { name: 'el-icon-error' },
                { name: 'el-icon-zoom-in' },
                { name: 'el-icon-zoom-out' },
                { name: 'el-icon-remove-outline' },
                { name: 'el-icon-circle-plus-outline' },
                { name: 'el-icon-circle-check' },
                { name: 'el-icon-circle-close' },
                { name: 'el-icon-s-help' },
                { name: 'el-icon-help' },
                { name: 'el-icon-minus' },
                { name: 'el-icon-plus' },
                { name: 'el-icon-check' },
                { name: 'el-icon-close' },
                { name: 'el-icon-picture' },
                { name: 'el-icon-picture-outline' },
                { name: 'el-icon-picture-outline-round' },
                { name: 'el-icon-upload' },
                { name: 'el-icon-upload2' },
                { name: 'el-icon-download' },
                { name: 'el-icon-camera-solid' },
                { name: 'el-icon-camera' },
                { name: 'el-icon-video-camera-solid' },
                { name: 'el-icon-video-camera' },
                { name: 'el-icon-message-solid' },
                { name: 'el-icon-bell' },
                { name: 'el-icon-s-cooperation' },
                { name: 'el-icon-s-order' },
                { name: 'el-icon-s-platform' },
                { name: 'el-icon-s-fold' },
                { name: 'el-icon-s-unfold' },
                { name: 'el-icon-s-operation' },
                { name: 'el-icon-s-promotion' },
                { name: 'el-icon-s-home' },
                { name: 'el-icon-s-release' },
                { name: 'el-icon-s-ticket' },
                { name: 'el-icon-s-management' },
                { name: 'el-icon-s-open' },
                { name: 'el-icon-s-shop' },
                { name: 'el-icon-s-marketing' },
                { name: 'el-icon-s-flag' },
                { name: 'el-icon-s-comment' },
                { name: 'el-icon-s-finance' },
                { name: 'el-icon-s-claim' },
                { name: 'el-icon-s-custom' },
                { name: 'el-icon-s-opportunity' },
                { name: 'el-icon-s-data' },
                { name: 'el-icon-s-check' },
                { name: 'el-icon-s-grid' },
                { name: 'el-icon-menu' },
                { name: 'el-icon-share' },
                { name: 'el-icon-d-caret' },
                { name: 'el-icon-caret-left' },
                { name: 'el-icon-caret-right' },
                { name: 'el-icon-caret-bottom' },
                { name: 'el-icon-caret-top' },
                { name: 'el-icon-bottom-left' },
                { name: 'el-icon-bottom-right' },
                { name: 'el-icon-back' },
                { name: 'el-icon-right' },
                { name: 'el-icon-bottom' },
                { name: 'el-icon-top' },
                { name: 'el-icon-top-left' },
                { name: 'el-icon-top-right' },
                { name: 'el-icon-arrow-left' },
                { name: 'el-icon-arrow-right' },
                { name: 'el-icon-arrow-down' },
                { name: 'el-icon-arrow-up' },
                { name: 'el-icon-d-arrow-left' },
                { name: 'el-icon-d-arrow-right' },
                { name: 'el-icon-video-pause' },
                { name: 'el-icon-video-play' },
                { name: 'el-icon-refresh' },
                { name: 'el-icon-refresh-right' },
                { name: 'el-icon-refresh-left' },
                { name: 'el-icon-finished' },
                { name: 'el-icon-sort' },
                { name: 'el-icon-sort-up' },
                { name: 'el-icon-sort-down' },
                { name: 'el-icon-rank' },
                { name: 'el-icon-loading' },
                { name: 'el-icon-view' },
                { name: 'el-icon-c-scale-to-original' },
                { name: 'el-icon-date' },
                { name: 'el-icon-edit' },
                { name: 'el-icon-edit-outline' },
                { name: 'el-icon-folder' },
                { name: 'el-icon-folder-opened' },
                { name: 'el-icon-folder-add' },
                { name: 'el-icon-folder-remove' },
                { name: 'el-icon-folder-delete' },
                { name: 'el-icon-folder-checked' },
                { name: 'el-icon-tickets' },
                { name: 'el-icon-document-remove' },
                { name: 'el-icon-document-delete' },
                { name: 'el-icon-document-copy' },
                { name: 'el-icon-document-checked' },
                { name: 'el-icon-document' },
                { name: 'el-icon-document-add' },
                { name: 'el-icon-printer' },
                { name: 'el-icon-paperclip' },
                { name: 'el-icon-takeaway-box' },
                { name: 'el-icon-search' },
                { name: 'el-icon-monitor' },
                { name: 'el-icon-attract' },
                { name: 'el-icon-mobile' },
                { name: 'el-icon-scissors' },
                { name: 'el-icon-umbrella' },
                { name: 'el-icon-headset' },
                { name: 'el-icon-brush' },
                { name: 'el-icon-mouse' },
                { name: 'el-icon-coordinate' },
                { name: 'el-icon-magic-stick' },
                { name: 'el-icon-reading' },
                { name: 'el-icon-data-line' },
                { name: 'el-icon-data-board' },
                { name: 'el-icon-pie-chart' },
                { name: 'el-icon-data-analysis' },
                { name: 'el-icon-collection-tag' },
                { name: 'el-icon-film' },
                { name: 'el-icon-suitcase' },
                { name: 'el-icon-suitcase-1' },
                { name: 'el-icon-receiving' },
                { name: 'el-icon-collection' },
                { name: 'el-icon-files' },
                { name: 'el-icon-notebook-1' },
                { name: 'el-icon-notebook-2' },
                { name: 'el-icon-toilet-paper' },
                { name: 'el-icon-office-building' },
                { name: 'el-icon-school' },
                { name: 'el-icon-table-lamp' },
                { name: 'el-icon-house' },
                { name: 'el-icon-no-smoking' },
                { name: 'el-icon-smoking' },
                { name: 'el-icon-shopping-cart-full' },
                { name: 'el-icon-shopping-cart-1' },
                { name: 'el-icon-shopping-cart-2' },
                { name: 'el-icon-shopping-bag-1' },
                { name: 'el-icon-shopping-bag-2' },
                { name: 'el-icon-sold-out' },
                { name: 'el-icon-sell' },
                { name: 'el-icon-present' },
                { name: 'el-icon-box' },
                { name: 'el-icon-bank-card' },
                { name: 'el-icon-money' },
                { name: 'el-icon-coin' },
                { name: 'el-icon-wallet' },
                { name: 'el-icon-discount' },
                { name: 'el-icon-price-tag' },
                { name: 'el-icon-news' },
                { name: 'el-icon-guide' },
                { name: 'el-icon-male' },
                { name: 'el-icon-female' },
                { name: 'el-icon-thumb' },
                { name: 'el-icon-cpu' },
                { name: 'el-icon-link' },
                { name: 'el-icon-connection' },
                { name: 'el-icon-open' },
                { name: 'el-icon-turn-off' },
                { name: 'el-icon-set-up' },
                { name: 'el-icon-chat-round' },
                { name: 'el-icon-chat-line-round' },
                { name: 'el-icon-chat-square' },
                { name: 'el-icon-chat-dot-round' },
                { name: 'el-icon-chat-dot-square' },
                { name: 'el-icon-chat-line-square' },
                { name: 'el-icon-message' },
                { name: 'el-icon-postcard' },
                { name: 'el-icon-position' },
                { name: 'el-icon-turn-off-microphone' },
                { name: 'el-icon-microphone' },
                { name: 'el-icon-close-notification' },
                { name: 'el-icon-bangzhu' },
                { name: 'el-icon-time' },
                { name: 'el-icon-odometer' },
                { name: 'el-icon-crop' },
                { name: 'el-icon-aim' },
                { name: 'el-icon-switch-button' },
                { name: 'el-icon-full-screen' },
                { name: 'el-icon-copy-document' },
                { name: 'el-icon-mic' },
                { name: 'el-icon-stopwatch' },
                { name: 'el-icon-medal-1' },
                { name: 'el-icon-medal' },
                { name: 'el-icon-trophy' },
                { name: 'el-icon-trophy-1' },
                { name: 'el-icon-first-aid-kit' },
                { name: 'el-icon-discover' },
                { name: 'el-icon-place' },
                { name: 'el-icon-location' },
                { name: 'el-icon-location-outline' },
                { name: 'el-icon-location-information' },
                { name: 'el-icon-add-location' },
                { name: 'el-icon-delete-location' },
                { name: 'el-icon-map-location' },
                { name: 'el-icon-alarm-clock' },
                { name: 'el-icon-timer' },
                { name: 'el-icon-watch-1' },
                { name: 'el-icon-watch' },
                { name: 'el-icon-lock' },
                { name: 'el-icon-unlock' },
                { name: 'el-icon-key' },
                { name: 'el-icon-service' },
                { name: 'el-icon-mobile-phone' },
                { name: 'el-icon-bicycle' },
                { name: 'el-icon-truck' },
                { name: 'el-icon-ship' },
                { name: 'el-icon-basketball' },
                { name: 'el-icon-football' },
                { name: 'el-icon-soccer' },
                { name: 'el-icon-baseball' },
                { name: 'el-icon-wind-power' },
                { name: 'el-icon-light-rain' },
                { name: 'el-icon-lightning' },
                { name: 'el-icon-heavy-rain' },
                { name: 'el-icon-sunrise' },
                { name: 'el-icon-sunrise-1' },
                { name: 'el-icon-sunset' },
                { name: 'el-icon-sunny' },
                { name: 'el-icon-cloudy' },
                { name: 'el-icon-partly-cloudy' },
                { name: 'el-icon-cloudy-and-sunny' },
                { name: 'el-icon-moon' },
                { name: 'el-icon-moon-night' },
                { name: 'el-icon-dish' },
                { name: 'el-icon-dish-1' },
                { name: 'el-icon-food' },
                { name: 'el-icon-chicken' },
                { name: 'el-icon-fork-spoon' },
                { name: 'el-icon-knife-fork' },
                { name: 'el-icon-burger' },
                { name: 'el-icon-tableware' },
                { name: 'el-icon-sugar' },
                { name: 'el-icon-dessert' },
                { name: 'el-icon-ice-cream' },
                { name: 'el-icon-hot-water' },
                { name: 'el-icon-water-cup' },
                { name: 'el-icon-coffee-cup' },
                { name: 'el-icon-cold-drink' },
                { name: 'el-icon-goblet' },
                { name: 'el-icon-goblet-full' },
                { name: 'el-icon-goblet-square' },
                { name: 'el-icon-goblet-square-full' },
                { name: 'el-icon-refrigerator' },
                { name: 'el-icon-grape' },
                { name: 'el-icon-watermelon' },
                { name: 'el-icon-cherry' },
                { name: 'el-icon-apple' },
                { name: 'el-icon-pear' },
                { name: 'el-icon-orange' },
                { name: 'el-icon-coffee' },
                { name: 'el-icon-ice-tea' },
                { name: 'el-icon-ice-drink' },
                { name: 'el-icon-milk-tea' },
                { name: 'el-icon-potato-strips' },
                { name: 'el-icon-lollipop' },
                { name: 'el-icon-ice-cream-square' },
                { name: 'el-icon-ice-cream-round' },
            ]
        }
    },
    methods: {
        closeDialog() {
            this.$emit("closeDialog")
        },
        operationFrom() {
            this.$emit("operationFrom")
        },
        comitDialog() {
            this.submitForm("ruleForm");
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    if (this.title == "新增菜单") {
                        let data = JSON.parse(JSON.stringify(this.form));
                        data.fatherId = this.menu[this.menu.length - 1] || 0;
                        addMenu(data).then(() => {
                            this.operationFrom();
                        })
                    } else {
                        if (this.title == "编辑菜单") {
                            let data = JSON.parse(JSON.stringify(this.form));
                            data.fatherId = this.menu[this.menu.length - 1] || 0;
                            updateMenu(data).then(() => {
                                this.operationFrom();
                            })
                        }
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        querySearch(queryString, cb) {
            var iconList = this.iconList;
            var results = queryString ? iconList.filter(item => item.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1) : iconList;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        iconHandleSelect(item) {
            // console.log(item);
            this.form.icon = item.name
        },
        //获取所有菜单
        getAllMenu() {
            getAllMenu().then(res => {
                this.tree = res.data.data
            })
        },
        getMenuById(id) {
            getMenuById({ id: id }).then(res => {
                this.form = res.data.data
            })
        },
        getFaththIdListByid(id) {
            getFaththIdListByid({id}).then(res => {
                this.menu = res.data.data
            })
        }
    }
}
</script>
<style scoped>
.el-select {
    width: 100%;
}
</style>
<style>
.my-autocomplete .el-autocomplete-suggestion__list {
    display: flex;
    flex-wrap: wrap;
}
.my-autocomplete .el-autocomplete-suggestion__list li {
    flex-basis: 50%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-content: center;
    height: auto;
    padding: 5px 0 5px 10px;
}
.my-autocomplete .el-autocomplete-suggestion__list li .name {
    word-break: break-all;
    white-space: pre-wrap;
    line-height: normal;
}
.my-autocomplete .el-autocomplete-suggestion__list li .icon {
    text-align: center;
    font-size: 20px;
}
</style>